<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习一</title>
    <link rel="stylesheet" href="CSS/Style.css">
    <script src="Js/jQuery/jquery-2.2.3.min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&amp;ak=SS4ym5KlDwbL1ld0GOu6Tiisa7A5mpXh"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=SS4ym5KlDwbL1ld0GOu6Tiisa7A5mpXh&amp;services=&amp;t=20170511202040"></script>
    <script src="Js/Echarts/echarts.min.js"></script>
    <script src="http://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>
    <script src="http://gallery.echartsjs.com/dep/echarts/latest/extension/dataTool.min.js"></script>
    <script src="Js/EgMap1.js"></script>
    <script src="Js/Drag.js"></script>
</head>
<body>
<div class="container">
    <div class="mapWrap" id="mapContainer"><!--地图容器--></div>
    <div class="dataWrap">
        <section class="Chart leftTop" id="drag">
            <div class="title">
                <h4 class="subTitle">数据展示一</h4>
                <div class="iconCtrl">
                    <a class="min" href="javascript:void (0);" title="最小化"></a>
                    <a class="max" href="javascript:void (0);" title="最大化"></a>
                    <a class="revert" href="javascript:void (0);" title="还原"></a>
                    <a class="close" href="javascript:void (0);" title="关闭"></a>
                </div>
            </div>
            <div class="resizeL"></div>
            <div class="resizeT"></div>
            <div class="resizeR"></div>
            <div class="resizeB"></div>
            <div class="resizeLT"></div>
            <div class="resizeTR"></div>
            <div class="resizeBR"></div>
            <div class="resizeLB"></div>
            <div class="barChart content" id="barChart1"></div>
        </section>
        <section class="Chart leftMiddle" id="drag2">
            <div class="title">
                <h4 class="subTitle">数据展示二</h4>
                <div class="iconCtrl">
                    <a class="min" href="javascript:void (0);" title="最小化"></a>
                    <a class="max" href="javascript:void (0);" title="最大化"></a>
                    <a class="revert" href="javascript:void (0);" title="还原"></a>
                    <a class="close" href="javascript:void (0);" title="关闭"></a>
                </div>
            </div>
            <div class="barChart" id="barChart2"></div>
        </section>
        <section class="Chart leftBottom" id="drag3">
            <div class="title">
                <h4 class="subTitle">数据展示三</h4>
                <div class="iconCtrl">
                    <a class="min" href="javascript:void (0);" title="最小化"></a>
                    <a class="max" href="javascript:void (0);" title="最大化"></a>
                    <a class="revert" href="javascript:void (0);" title="还原"></a>
                    <a class="close" href="javascript:void (0);" title="关闭"></a>
                </div>
            </div>
            <div class="barChart" id="barChart3"></div>
        </section>
        <section class="Chart Vbottom" id="drag4">
            <div class="title">
                <h4 class="subTitle">数据展示四</h4>
                <div class="iconCtrl">
                    <a class="min" href="javascript:void (0);" title="最小化"></a>
                    <a class="max" href="javascript:void (0);" title="最大化"></a>
                    <a class="revert" href="javascript:void (0);" title="还原"></a>
                    <a class="close" href="javascript:void (0);" title="关闭"></a>
                </div>
            </div>
            <div class="barChart" id="barChart4"></div>
        </section>
        <section class="Chart rightTop" id="drag5">
            <div class="title">
                <h4 class="subTitle">数据展示五</h4>
                <div class="iconCtrl">
                    <a class="min" href="javascript:void (0);" title="最小化"></a>
                    <a class="max" href="javascript:void (0);" title="最大化"></a>
                    <a class="revert" href="javascript:void (0);" title="还原"></a>
                    <a class="close" href="javascript:void (0);" title="关闭"></a>
                </div>
            </div>
            <div class="barChart" id="barChart5"></div>
        </section>
        <section class="Chart rightMiddle" id="drag6">
            <div class="title">
                <h4 class="subTitle">数据展示六</h4>
                <div class="iconCtrl">
                    <a class="min" href="javascript:void (0);" title="最小化"></a>
                    <a class="max" href="javascript:void (0);" title="最大化"></a>
                    <a class="revert" href="javascript:void (0);" title="还原"></a>
                    <a class="close" href="javascript:void (0);" title="关闭"></a>
                </div>
            </div>
            <div class="barChart" id="barChart6"></div>
        </section>
        <section class="Chart rightBottom" id="drag7">
            <div class="title">
                <h4 class="subTitle">数据展示七</h4>
                <div class="iconCtrl">
                    <a class="min" href="javascript:void (0);" title="最小化"></a>
                    <a class="max" href="javascript:void (0);" title="最大化"></a>
                    <a class="revert" href="javascript:void (0);" title="还原"></a>
                    <a class="close" href="javascript:void (0);" title="关闭"></a>
                </div>
            </div>
            <div class="barChart" id="barChart7"></div>
        </section>
    </div>
</div>
</body>
</html>